
<template>
  <div>
    <a-row :gutter="16">
      <a-collapse default-active-key="1" expandIconPosition="right" style="margin-bottom: 10px; border: 1px solid #e8e8e8;">
        <a-collapse-panel key="1" header="盘库单信息">
          <div>
            <a-descriptions>
              <a-descriptions-item label="盘库单号">{{ orderInfo.code }}</a-descriptions-item>
              <a-descriptions-item label="盘库类型">{{ orderInfo.typeStr }}</a-descriptions-item>
              <a-descriptions-item label="确认人">{{ orderInfo.confirmBy }}</a-descriptions-item>
              <a-descriptions-item label="确认时间">{{ orderInfo.confirmTime }}</a-descriptions-item>
              <a-descriptions-item label="关闭人">{{ orderInfo.closeBy }}</a-descriptions-item>
              <a-descriptions-item label="关闭时间">{{ orderInfo.closeTime }}</a-descriptions-item>
              <a-descriptions-item label="备注">{{ orderInfo.remark }}</a-descriptions-item>
            </a-descriptions>
          </div>
          <a-list>
            <a-list-item>
              <a-tree
                default-expand-all
                :tree-data="treeData"
                :replaceFields="replaceFields"
              />
            </a-list-item>
            <div slot="header">
              盘库范围：
            </div>
          </a-list>
          <a-tag :color="orderInfo.status === 'CONFIRM' ? 'orange' : orderInfo.status === 'FINISHED' ? 'green' : 'blue'" slot="extra">{{ orderInfo.statusStr }}</a-tag>
        </a-collapse-panel>
      </a-collapse>
    </a-row>
    <a-row :gutter="16">
      <a-card
        :tabList="tabList"
        :activeTabKey="activeTabKey"
        @tabChange="(key) => {this.activeTabKey = key}"
      >
        <a-button slot="tabBarExtraContent" type="danger" @click="showDiff(orderInfo.code)">
          查看盘库差异
        </a-button>
        <a-collapse v-if="activeTabKey === '1' && orderItemData.length > 0" expandIconPosition="left" style="background-color: #fafafa;" @change="onChangeStoragePanel">
          <template #expandIcon="props">
            <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
          </template>
          <a-collapse-panel :key="item.code" v-for="(item) in orderItemData" class="customCollapse">
            <div>
              <a-table
                :columns="orderItemColumns"
                :dataSource="item.itemList"
                bordered
                size="small"
                :rowKey="(record) => record.barcode"
                :pagination="pagination"
              >
                <span slot="inventoryQtyScopedSlots" slot-scope="text, record">
                  <span v-if="record.isDiff === 0"> {{ text }} </span>
                  <span v-if="record.isDiff === 1">
                    <a-tag color="red">
                      {{ text }}
                    </a-tag>
                  </span>
                </span>
              </a-table>
            </div>
            <span slot="header">
              盘库记录单号: <a>{{ item.code }}</a> [{{ item.inventoryTime }}]
            </span>
            <span slot="extra">
              <span
                v-for="data in inventoryRecordStatusData"
                :key="data.code"
              >
                <a-tag v-if="data.code === item.status" :color="data.code === 'FINISHED' ? 'green' : 'purple'"> {{ data.name }} </a-tag>
              </span>
            </span>
          </a-collapse-panel>
        </a-collapse>
        <a-empty v-if="activeTabKey === '1' && orderItemData.length === 0" />
      </a-card>
    </a-row>
    <footer-tool-bar>
      <a-button class="subButton" @click="handleCancel">返回</a-button>
      <a-button type="primary" @click="reloadPage">刷新</a-button>
    </footer-tool-bar>
    <diff-info ref="diffInfo" @ok="handleOk" />
  </div>
</template>
<script>
  import FooterToolBar from '@/components/FooterToolbar'
  import { inventoryDetail } from '@/api/modular/main/stock/inventory/inventoryManage'
  import moment from 'moment'
  import diffInfo from './diffInfo.vue'
  export default {
    components: {
      moment,
      FooterToolBar,
      diffInfo
    },
    data () {
      return {
        treeData: [],
        replaceFields: {
          children: 'children',
          title: 'label',
          key: 'code'
        },
        activeTabKey: '1',
        statusData: [],
        orderInfo: {},
        orderItemData: [],
        inventoryTypeData: [],
        inventoryRecordStatusData: [],
        tabList: [
          {
            key: '1',
            tab: '盘库明细'
          }
        ],
        pagination: {
          pageSize: 10
        },
        orderItemColumns: [
          {
            title: '所属仓库',
            dataIndex: 'storehouseName',
            align: 'center',
            width: 150,
            scopedSlots: { customRender: 'storehouseName' }
          },
          {
            title: '所属库区',
            dataIndex: 'storehouseAreaName',
            align: 'center',
            width: 150,
            scopedSlots: { customRender: 'storehouseAreaName' }
          },
          {
            title: '所属库位',
            dataIndex: 'storehouseLocationCode',
            align: 'center',
            width: 150,
            scopedSlots: { customRender: 'storehouseLocationCode' }
          },
          {
            title: '条码号',
            dataIndex: 'barcode',
            align: 'center',
            width: 200,
            scopedSlots: { customRender: 'barcode' }
          },
          {
            title: '库存数量',
            dataIndex: 'currentQty',
            align: 'center',
            width: 120,
            scopedSlots: { customRender: 'currentQty' }
          },
          {
            title: '盘库数量',
            dataIndex: 'inventoryQty',
            align: 'center',
            width: 120,
            scopedSlots: { customRender: 'inventoryQtyScopedSlots' }
          },
          {
            title: '盘库人',
            dataIndex: 'inventoryUser',
            align: 'center',
            width: 150,
            scopedSlots: { customRender: 'inventoryUser' }
          },
          {
            title: '物料编码',
            dataIndex: 'materialCode',
            align: 'center',
            width: 150,
            scopedSlots: { customRender: 'materialCode' }
          },
          {
            title: '物料名称',
            dataIndex: 'materialName',
            align: 'center',
            width: 200,
            scopedSlots: { customRender: 'materialName' }
          },
          {
            title: '物料型号',
            dataIndex: 'materialModel',
            align: 'center',
            width: 300,
            scopedSlots: { customRender: 'materialModel' }
          },
          {
            title: '单位',
            dataIndex: 'unit',
            align: 'center',
            width: 80,
            scopedSlots: { customRender: 'unit' }
          }
        ]
      }
    },
    computed: {
    },
    created () {
      const statusOption = this.$options
      this.statusData = statusOption.filters['dictData']('inventory_status')
      const inventoryTypeOption = this.$options
      this.inventoryTypeData = inventoryTypeOption.filters['dictData']('inventory_type')
      const inventoryRecordStatusOption = this.$options
      this.inventoryRecordStatusData = inventoryRecordStatusOption.filters['dictData']('inventory_record_status')
    },
    activated () {
        const oldCode = this.orderInfo.code
        this.orderInfo.code = this.$route.query.code
        if (oldCode !== this.orderInfo.code) {
          this.reloadPage()
        }
      },
    methods: {
      inventoryDetail () {
        inventoryDetail(this.orderInfo.code).then((res) => {
          if (res.success) {
            this.orderInfo.code = res.data.code
            this.orderInfo.type = res.data.type
            this.orderInfo.typeStr = this.inventoryTypeData.find(item => res.data.type === item.code).name
            this.orderInfo.status = res.data.status
            this.orderInfo.statusStr = this.statusData.find(item => res.data.status === item.code).name
            this.orderInfo.remark = res.data.remark
            this.orderInfo.confirmBy = res.data.confirmBy
            this.orderInfo.confirmTime = res.data.confirmTime
            this.orderInfo.repeatBy = res.data.repeatBy
            this.orderInfo.repeatTime = res.data.repeatTime
            this.orderInfo.closeBy = res.data.closeBy
            this.orderInfo.closeTime = res.data.closeTime
            this.orderItemData = res.data.recordList
            this.treeData = res.data.storehouseTree
          } else {
            this.$message.error('盘库单数据加载失败:' + res.message)
          }
        })
      },
      reloadPage () {
        this.activeTabKey = '1'
        this.inventoryDetail()
      },
      onChangeStoragePanel (key) {
      },
      showDiff (code) {
        this.$refs.diffInfo.add(code)
      },
      handleOk () {
        this.$refs.table.refresh()
      },
      handleCancel () {
        this.$router.push({ path: '/inventory' })
      }
    }
  }
</script>
<style lang="less">
  .table-operator {
    margin-bottom: 18px;
  }
  button {
    margin-right: 8px;
  }
  .ant-collapse {
    background-color: #fff;
  }
  .ant-collapse-header {
    font-size: 16px;
  }
  .ant-collapse-content {
    overflow: hidden;
    color: rgba(0, 0, 0, 0.65);
    background-color: #fff;
    border-top: 1px solid #e8e8e8;
  }
  .customCollapse .ant-collapse-header {
    font-size: 14px;
  }
</style>
